{% extends "base.html" %}

{% block title %}发布新帖子 - 墨韵图书共享平台{% endblock %}

{% block content %}
<div class="container py-4">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card ink-card">
                <div class="card-header">
                    <h5 class="mb-0">发布新帖子</h5>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% if not circle_id %}
                        <div class="mb-3">
                            <label for="circle_id" class="form-label">所属圈子</label>
                            <select class="form-select" id="circle_id" name="circle_id">
                                <option value="">公共讨论区</option>
                                {% for circle in circles %}
                                    {% if current_user in circle.members or current_user.is_admin %}
                                    <option value="{{ circle.id }}">{{ circle.name }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                            <div class="form-text">选择一个圈子发布，或在公共区发布</div>
                        </div>
                        {% else %}
                        <input type="hidden" name="circle_id" value="{{ circle_id }}">
                        {% endif %}
                        
                        <div class="mb-3">
                            <label for="title" class="form-label">标题</label>
                            <input type="text" class="form-control" id="title" name="title" required>
                        </div>
                        
                        <div class="mb-3">
                            <label for="content" class="form-label">内容</label>
                            <div class="editor-toolbar mb-2">
                                <button type="button" class="btn btn-sm btn-outline-secondary" onclick="insertCodeBlock()">
                                    <i class="fas fa-code"></i> 插入代码块
                                </button>
                                <div class="dropdown d-inline-block ms-2">
                                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown">
                                        选择语言
                                    </button>
                                    <ul class="dropdown-menu" aria-labelledby="languageDropdown">
                                        <li><a class="dropdown-item" href="#" onclick="selectLanguage('python')">Python</a></li>
                                        <li><a class="dropdown-item" href="#" onclick="selectLanguage('javascript')">JavaScript</a></li>
                                        <li><a class="dropdown-item" href="#" onclick="selectLanguage('java')">Java</a></li>
                                        <li><a class="dropdown-item" href="#" onclick="selectLanguage('c')">C</a></li>
                                        <li><a class="dropdown-item" href="#" onclick="selectLanguage('cpp')">C++</a></li>
                                        <li><a class="dropdown-item" href="#" onclick="selectLanguage('csharp')">C#</a></li>
                                        <li><a class="dropdown-item" href="#" onclick="selectLanguage('php')">PHP</a></li>
                                        <li><a class="dropdown-item" href="#" onclick="selectLanguage('html')">HTML</a></li>
                                        <li><a class="dropdown-item" href="#" onclick="selectLanguage('css')">CSS</a></li>
                                        <li><a class="dropdown-item" href="#" onclick="selectLanguage('sql')">SQL</a></li>
                                    </ul>
                                </div>
                            </div>
                            <textarea class="form-control" id="content" name="content" rows="10" required></textarea>
                            <div class="form-text">
                                支持Markdown格式和代码高亮。使用 ```语言名 代码 ``` 格式添加代码块，例如：<br>
                                <code>```python<br>def hello_world():<br>&nbsp;&nbsp;&nbsp;&nbsp;print("Hello, World!")<br>```</code>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between">
                            {% if circle_id %}
                            <a href="{{ url_for('circle_detail', circle_id=circle_id) }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-1"></i> 返回圈子
                            </a>
                            {% else %}
                            <a href="{{ url_for('forum') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-1"></i> 返回论坛
                            </a>
                            {% endif %}
                            
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-paper-plane me-1"></i> 发布帖子
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.ink-card {
    border: none;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.ink-header {
    background-color: #f8f9fa;
    border-bottom: none;
    padding: 1.5rem;
}

.ink-input {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 0.75rem;
    transition: all 0.3s ease;
}

.ink-input:focus {
    border-color: #6c757d;
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.25);
}

textarea.ink-input {
    resize: vertical;
    min-height: 200px;
}

.form-select.ink-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}
</style>

{% block scripts %}
<script>
    let selectedLanguage = 'python'; // 默认语言

    function selectLanguage(language) {
        selectedLanguage = language;
        document.getElementById('languageDropdown').innerText = language;
    }

    function insertCodeBlock() {
        const textarea = document.getElementById('content');
        const start = textarea.selectionStart;
        const end = textarea.selectionEnd;
        const selectedText = textarea.value.substring(start, end);
        
        // 创建代码块模板
        const codeBlock = `\`\`\`${selectedLanguage}\n${selectedText || '在这里粘贴代码'}\n\`\`\`\n`;
        
        // 插入代码块
        textarea.value = textarea.value.substring(0, start) + codeBlock + textarea.value.substring(end);
        
        // 重新设置光标位置
        const newCursorPos = start + codeBlock.indexOf('在这里粘贴代码');
        textarea.setSelectionRange(newCursorPos, newCursorPos + 6);
        textarea.focus();
    }
</script>
{% endblock %}
{% endblock %} 